<script setup>
import Card from '@/components/Card.vue'
import { onMounted, ref, watch } from 'vue'
import { userArticleListService } from '@/api/article/index.js'
import NavBar from '@/components/NavBar.vue'
import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router'
import SearchBox from '@/components/SearchBox.vue'

const articleList = ref()
const currentPage = ref()
const totalPages = ref()
const active = ref('默认')
const router = useRouter()
const route = useRoute()
onMounted(async () => {
  const response = await userArticleListService('1', '6', '默认', null)
  console.log(response)
  articleList.value = response.data.data.records
  currentPage.value = 1
  totalPages.value = response.data.data.pages
})

async function onSwitchPage(page) {
  currentPage.value = page
  let response
  if (route.query.type) {
    response = await userArticleListService(page, '6', active.value, null)
  } else {
    response = await userArticleListService(page, '6', '默认', null)
  }
  articleList.value = response.data.data.records

  router.push(`/article-list?page=${currentPage.value}&pageSize=6&type=${active.value}`)
}
async function onClickTab() {
  router.push(`/article-list?page=1&pageSize=6&type=${active.value}`) //同一组件并不会重新渲染
  const response = await userArticleListService('1', '6', active.value, null)
  articleList.value = response.data.data.records
  totalPages.value = response.data.data.pages
  currentPage.value = 1
}

// 监听 $route 对象
// watch(route, (to, from) => {
//   console.log("URL changed from:", from.fullPath);
//   console.log("URL changed to:", to.fullPath);

//   // 在这里处理 URL 变化后的逻辑
// });
</script>
<template>
  <div class="container">
    <NavBar name="看课件"></NavBar>
    <SearchBox></SearchBox>
    <van-tabs v-model:active="active" @click-tab="onClickTab">
      <van-tab title="默认" name="默认"></van-tab>
      <van-tab title="热门知识" name="热门知识"></van-tab>
      <van-tab title="营业" name="营业"></van-tab>
      <van-tab title="装维" name="装维"></van-tab>
      <van-tab title="政企客户经理" name="政企客户经理"></van-tab>
      <van-tab title="客经专员" name="客经专员"></van-tab>
      <van-tab title="支局长" name="支局长"></van-tab>
      <van-tab title="片区长" name="片区长"></van-tab>
      <van-tab title="VIP客户经理" name="VIP客户经理"></van-tab>
    </van-tabs>
    <Card
      class="card"
      v-for="object in articleList"
      :object="object"
      type="课件"
      :key="index"
    ></Card>
    <van-pagination
      v-model="currentPage"
      :page-count="totalPages"
      @change="onSwitchPage"
      :show-page-size="5"
      force-ellipses
      class="page"
    />
  </div>
</template>
<style scoped>
.container {
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd; /* 添加边框 */
  margin-bottom: 2rem; /* 在垂直方向上设置间距 */
  padding: 10px; /* 可选：为卡片内容添加一些内边距 */
  border-radius: 5px; /* 可选：给边框添加圆角 */
}
.card {
  margin: 0.75rem; /* 12px */
  margin-bottom: 0.5rem; /* 8px */
}
.page {
  margin-bottom: 2rem;
}
</style>
